<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="ONE,GO物,网上购物,交易市场,网上交易">
    <meta name="description" content="ONE-GO物，平价线上交易平台，提供各类商品交易，让大家都可以享受购物的乐趣和真正品质购物">
    <title>ONE - GO物 | 个人信息</title>
    <link rel="shortcut icon" href="/static/images/logo_i.png">
    <!--引入layui css样式-->
    <link rel="stylesheet" href="/static/layui-v2.6.7/layui/css/layui.css">
    <!--引入layui js脚本-->
    <script src="/static/layui-v2.6.7/layui/layui.js"></script>
    <script src="/static/js/user.js"></script>
    <link rel="stylesheet" href="/static/css/index.css">
    <style type="text/css">
        .content-box {
            display: flex;
            justify-content: space-between;
        }

        .content-box .info-box {
            width: 880px;
        }

        .content-box .info-box .layui-form-item {
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
<!--头部 start-->
<div class="header">
    <div class="layui-header layui-bg-red">
        <div class="layui-container header-content">
            <!--logo start-->
            <a class="layui-logo logo-box" href="/static/index.html">
                <img src="/static/images/logo_w.png" alt="ONE-GO物" class="logo">
                <h2>ONE-GO物</h2>
            </a>
            <!--logo end-->

            <!--用户信息 start-->
            <ul class="layui-nav user-box layui-bg-red" lay-bar="disabled">
                <li class="layui-nav-item">
                    <a href="" class="layui-icon layui-icon-cart">购物车<span class="layui-badge layui-bg-orange">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="">全部订单<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item" lay-unselect="" id="user_info">
                    <a href="javascript:;"><img src="/static/images/logo_w.png" class="layui-nav-img"
                                                id="portrait_s"><span
                            id="nickname"></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">个人信息</a></dd>
                        <dd><a href="javascript:;">足迹</a></dd>
                        <hr>
                        <dd><a href="javascript:logout();">退出</a></dd>
                    </dl>
                </li>
            </ul>
            <!--用户信息 end-->
        </div>
    </div>
</div>
<!--头部 end-->

<!--主体 start-->
<div class="content">
    <div class="layui-container content-box">
        <div class="portrait-box">
            <p>头像：</p>
            <div class="layui-upload-drag" id="portrait">
                <div class="layui-hide" id="uploadDemoView">
                    <hr>
                    <img src="" alt="上传成功后渲染" style="max-width: 196px">
                </div>
                <i class="layui-icon"></i>
                <p>点击上传，或将图片拖拽到此处</p>
            </div>
        </div>
        <div class="info-box">
            <form action="" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-block">
                        <input type="text" name="nickname" placeholder="请输入昵称"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" placeholder="请输入手机号码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input type="number" name="age" placeholder="请输入手机号码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="1" title="男" checked="">
                        <input type="radio" name="sex" value="0" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">住址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" placeholder="请输入住址"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-block">
                        <input type="date" name="birthday" placeholder="请输入住址"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="info">立即保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--主体 end-->
<script>
    layui.use(['layer', 'form', 'jquery', 'upload', 'element'], function () {
        var layer = layui.layer
            , form = layui.form
            , $ = layui.$
            , upload = layui.upload
            , element = layui.element;

        $.ajax({
            type: "GET",
            url: "/user/info/",
            headers: {
                'Authorization': localStorage.getItem('Authorization')
            },
            success: function (data) {
                console.log(data)
                let code = data.code
                if (code != 200) {
                    location.href = '/static/index.html'
                } else {
                    let user = data.data
                    let nickname = data.data.email
                    if (user.detail) {
                        let detail = user.detail
                        if (detail.nickname) {
                            nickname = detail.nickname
                        }
                        if (detail.portrait) {
                            layui.$('#portrait_s').attr('src', detail.portrait);
                            layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', detail.portrait);
                        }

                        $('input[name="nickname"]').val(detail.nickname)
                        $('input[name="phone"]').val(detail.phone)
                        $('input[name="age"]').val(detail.age)
                        $('input[name="address"]').val(detail.address)
                        $('input[name="birthday"]').val(detail.birthday)

                        if (detail.sex == 0) {
                            $('input[name="sex"][value="1"]').prop('checked', 'false')
                            $('input[name="sex"][value="0"]').prop('checked', 'true')
                        }
                        form.render()
                    }
                    $('#nickname').html(nickname)
                }
            }
        });

        //拖拽上传
        upload.render({
            elem: '#portrait'
            , url: '/user/portrait/upload/' //改成您自己的上传接口
            , headers: {
                'Authorization': localStorage.getItem('Authorization')
            }
            , done: function (res) {
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data);
                layui.$('#portrait_s').attr('src', res.data);
            }
        });

        // 保存用户信息
        //监听提交
        form.on('submit(info)', function (data) {
            $.ajax({
                type: "POST",
                url: "/user/info/",
                headers: {
                    'Authorization': localStorage.getItem('Authorization')
                },
                data: data.field,
                success: function (data) {
                    $('#nickname').html($('input[name="nickname"]').val())
                }
            });
            return false
        })
    });
</script>
</body>
</html>